<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="绩效时间：">
        <el-date-picker v-model="searchMonth" type="month" :editable="false" placeholder="选择月" value-format="yyyy-MM"></el-date-picker>
      </el-form-item>
      <el-form-item label="考评状态：">
        <el-select v-model="searchStatus" placeholder="请选择">
          <el-option
            v-for="item in kpiStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList(true)" :loading="dataListLoading">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :height="tableHeight" :data="myTableData" border style="width: 100%">
      <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
      <el-table-column label="姓名" prop="dingName" width="90" align="center"></el-table-column>
      <el-table-column label="部门" prop="department" width="120" align="center"></el-table-column>
      <el-table-column label="考核月份" prop="kpiDate" width="100" align="center"></el-table-column>
      <el-table-column label="考核类型" prop="kpiItemType" width="160" align="center"></el-table-column>
      <el-table-column label="考核内容" prop="kpiItemName" min-width="160" align="left" header-align="center"></el-table-column>
      <el-table-column label="考核关键点" prop="kpiItemKey" min-width="220" align="left" header-align="center">
        <template slot-scope="scope">
          <div style="white-space: pre-line;">{{scope.row.kpiItemKey}}</div>
        </template>
      </el-table-column>
      <el-table-column label="考核参考指标" prop="kpiItemIndex" min-width="200" align="left" header-align="center">
        <template slot-scope="scope">
          <div style="white-space: pre-line;">{{scope.row.kpiItemIndex}}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="分数"
        align="center"
        width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.scores === '' && scope.row.status  === 2" @click="openAssessDialog(scope.row)" type="text" size="small">评分</el-button>
          <span v-if="scope.row.scores !== ''">{{scope.row.scores}}<i v-if="scope.row.status === 2" @click="openAssessDialog(scope.row)" class="el-icon-edit-outline" style="margin-left:5px;color:#66b1ff;cursor:pointer;"></i></span>
        </template>
      </el-table-column>
      <el-table-column label="评分详情" prop="remark" min-width="130" align="left" header-align="center"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="myPageConfig.pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="myPageConfig.pageSize"
      :total="myPageConfig.totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog title="评分窗口" :visible.sync="assessDialog" width="600px"> 
      <el-form :model="form" style="padding-right:100px;">
        <el-form-item style="margin-bottom: 0;" label="被考核人：" :label-width="formLabelWidth">
          <span>{{form.dingName}}</span>
        </el-form-item>
        <el-form-item style="margin-bottom: 0;" label="考核内容：" :label-width="formLabelWidth">
          <span>{{form.kpiItemName}}</span>
        </el-form-item>
        <el-form-item style="margin-bottom: 0;" label="考核参考指标：" :label-width="formLabelWidth">
          <p style="white-space: pre-line;line-height: 23px;margin: 0;padding-top: 8px;">{{form.kpiItemIndex}}</p>
        </el-form-item>
        <el-form-item style="margin-bottom: 0;" label="分数：" :label-width="formLabelWidth">
          <el-rate v-model="form.scores" style="margin-top:8px;"></el-rate>
          <span style="position:absolute;top:0;right:0;cursor:pointer;color:#66b1ff;" @click="form.scores = 0;">分数清零</span>
        </el-form-item>
        <el-form-item style="margin-bottom: 0;" label="评分依据：" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="5" placeholder="请输入评分的依据" v-model="form.remark"></el-input>
        </el-form-item>
        <p class="notice">注：要求评分公正、公平、严谨，评分范围0-5星。如发现有徇私舞弊现象，将追究评分人和被评分人的责任。</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="assessDialog = false">取 消</el-button>
        <el-button type="primary" @click="assess">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dataListLoading: false,
        searchMonth:'',
        kpiStatus: [{
          value: '',
          label: '全部'
        }, {
          value: true,
          label: '已评分'
        }, {
          value: false,
          label: '未评分'
        }],
        searchStatus: '',
        myTableData: [],
        assessDialog: false,
        form: {
          scores: 1,
          remark: '',
          paperScoresId: '',
          dingName: '',
          kpiItemName: '',
          kpiItemIndex: ''
        },
        myPageConfig:{
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0
        },
        formLabelWidth: '120px',
        tableHeight: window.tableHeight
      };
    },
    mounted() {
      this.searchList(true);
    },
    activated() {
      this.tableHeight = document.documentElement['clientHeight'] - 270
      window.onresize = () => {
        this.tableHeight = document.documentElement['clientHeight'] - 270
      }
    },
    methods: {
      sizeChangeHandle (val) {
        this.myPageConfig.pageSize = val
        this.searchList(true)
      },
      
      currentChangeHandle (val) {
        this.myPageConfig.pageIndex = val
        this.searchList()
      },
      openAssessDialog(kpiItem) {
        this.assessDialog = true;
        this.form.scores = kpiItem.scores ? kpiItem.scores: 0;
        this.form.remark = kpiItem.remark ? kpiItem.remark: '';
        this.form.paperScoresId  = kpiItem.scoreId;
        this.form.dingName = kpiItem.dingName;
        this.form.kpiItemName = kpiItem.kpiItemName;
        this.form.kpiItemIndex = kpiItem.kpiItemIndex;
      },

      searchList(init) {
        if(init) this.myPageConfig.pageIndex = 1;
        this.$http({
          url: this.$http.adornUrl('/kpi/scores/getTask'),
          method: 'post',
          params: this.$http.adornParams({
            'kpiDate': this.searchMonth,
            'page': this.myPageConfig.pageIndex,
            'hasDone': this.searchStatus,
            'limit': this.myPageConfig.pageSize
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.myTableData = data.data.list;
            this.myPageConfig.totalPage = data.data.totalCount;
          }
        })
      },
      assess() {
        this.$http({
          url: this.$http.adornUrl('/kpi/scores/give'),
          method: 'post',
          params: this.$http.adornParams(this.form)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$notify({
              title: '成功',
              message: '打分成功',
              type: 'success'
            });
            this.searchList();
          }else {
            this.$message.error(data.msg)
          }
        }).finally(() => {
          this.assessDialog = false;
        })
      }
    }
  };
</script>
<style lang="scss" scoped>
  .notice{
    margin-top:10px;
    color:red;
    padding-left:120px;
  }
</style>